<template>
  <view class="tabbar-wrapper">
    <view class="tabbar-left">
      <view class="tab-item" @tap="switchTab('/pages/tab/home/index')">
        <image :src="selectedPath === '/pages/tab/home/index' ? iconHomeSelected : iconHome" class="tab-icon" />
        <text :style="{color: selectedPath === '/pages/tab/home/index' ? selectedColor : color}">首页</text>
      </view>
      <view class="tab-item" @tap="switchTab('/pages/tab/pick/index')">
        <image :src="selectedPath === '/pages/tab/pick/index' ? iconPickSelected : iconPick" class="tab-icon" />
        <text :style="{color: selectedPath === '/pages/tab/pick/index' ? selectedColor : color}">取单</text>
      </view>
    </view>

    <view class="tabbar-center" @tap="navigateTo('/pages/tab/order/index')">
      <view class="center-btn">
        <image :src="selectedPath === '/pages/tab/order/index' ? iconOrderSelected : iconOrder" class="center-icon" />
        <text class="center-text" style="color: #fff">开单</text>
      </view>
    </view>

    <view class="tabbar-right">
      <view class="tab-item" @tap="switchTab('/pages/tab/cashier/index')">
        <image :src="selectedPath === '/pages/tab/cashier/index' ? iconCashierSelected : iconCashier"
          class="tab-icon" />
        <text :style="{color: selectedPath === '/pages/tab/cashier/index' ? selectedColor : color}">收银</text>
      </view>
      <view class="tab-item" @tap="switchTab('/pages/tab/user/index')">
        <image :src="selectedPath === '/pages/tab/user/index' ? iconUserSelected : iconUser" class="tab-icon" />
        <text :style="{color: selectedPath === '/pages/tab/user/index' ? selectedColor : color}">我的</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { defineEmits, ref } from 'vue'

  const emit = defineEmits(['navigate'])

  const selectedPath = ref<string>('')
  const color = '#1b233b'
  const selectedColor = '#21d59d'
  const iconHome = '/static/images/tabbar/icon_home.png'
  const iconHomeSelected = '/static/images/tabbar/icon_home_selected.png'
  const iconPick = '/static/images/tabbar/icon_list.png'
  const iconPickSelected = '/static/images/tabbar/icon_list_selected.png'
  const iconOrder = '/static/images/tabbar/icon_order.png'
  const iconOrderSelected = '/static/images/tabbar/icon_center_selected.png'
  const iconCashier = '/static/images/tabbar/icon_cart.png'
  const iconCashierSelected = '/static/images/tabbar/icon_cart_selected.png'
  const iconUser = '/static/images/tabbar/icon_user.png'
  const iconUserSelected = '/static/images/tabbar/icon_user_selected.png'

  function switchTab(url : string) {
    uni.navigateTo({
      url
    })
  }

  function navigateTo(url : string) {
    emit('navigate', { type: 'navigateTo', url })
  }

  onShow(() => {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const currentRoute = '/' + currentPage.route
    selectedPath.value = currentRoute
  })
</script>

<style scoped>
  .tabbar-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20rpx;
    height: 100rpx;
    border-top: 1rpx solid #ddd;
    z-index: 1000;
  }

  .tabbar-left,
  .tabbar-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tab-icon {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 5rpx;
  }

  .tabbar-center {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    margin-top: -60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .center-btn {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 40rpx;
    border-radius: 60rpx;
    background: #21d59d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .center-icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 4rpx;
  }

  .center-text {
    color: #ffffff;
    font-size: 24rpx;
  }
</style>
